<template>
	<view class="container">
		<!-- 顶部背景图 -->
		<u-navbar
			title="提现详情" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<image 
			class="bgImg" 
			src="../../static/images/img_tx_nav_bg.png"
			mode=""
		></image>
		<view class="content flex_clm justify-start align-center">
			<view class="top flex justify-center align-center">
				<image
					style="width: 80rpx;height: 80rpx;margin-right: 38rpx;" 
					:src="statusList.find(item=>detailInfo.auditStatus==item.value).image" 
					mode=""
				/>
				<text class="text_1">{{statusList.find(item=>detailInfo.auditStatus==item.value).label}}</text>
			</view>
			<view class="center"></view>
			<view class="bottom">
				<view class="price flex_clm justify-start align-center">
					<text class="text_2" style="margin-bottom: 2rpx;">￥{{detailInfo.price}}</text>
					<text class="text_3">提现金额</text>
				</view>
				<view class="info">
					<!-- 提现账户 -->
					<view class="info_item flex justify-start align-start" style="margin-bottom: 36rpx;">
						<text class="text_3" style="margin-right: 10rpx;">提现账户：</text>
						<view class="flex_clm justify-start align-start text_4">
							<text>{{ 
								detailInfo.type==1 ? '微信账户' 
								: detailInfo.type==2 ? '支付宝账户' 
								: detailInfo.type==3 ? '银行卡账户' 
								: '' 
							}}</text>
							<text>{{ detailInfo.account }}</text>
						</view>
					</view>
					<!-- 提现时间 -->
					<view class="info_item flex justify-start align-start" style="margin-bottom: 36rpx;">
						<text class="text_3" style="margin-right: 10rpx;">提现时间：</text>
						<view class="flex_clm justify-start align-start text_4">
							<text>{{ detailInfo.createTime }}</text>
						</view>
					</view>
					<!-- 失败原因 -->
					<view 
						class="info_item flex justify-start align-start" 
						style="margin-bottom: 36rpx;"
						v-show="detailInfo.auditStatus==3"
					>
						<text class="text_3" style="margin-right: 10rpx;">失败原因：</text>
						<view 
							class="flex_clm justify-start align-start text_4"
							style="word-break: break-all;"
						>
							<text>{{ detailInfo.failReason || '空' }}</text>
						</view>
					</view>
					<!-- 提现凭证 -->
					<view 
						class="info_item flex justify-start align-start" 
						style="margin-bottom: 36rpx;"
						v-if="detailInfo.auditStatus==2"
					>
						<text class="text_3" style="margin-right: 10rpx;">提现凭证：</text>
						<view class="flex_clm justify-start align-start text_4">
							<!-- <text>{{ detailInfo.voucher }}</text> -->
							<image 
								:src="detailInfo.voucher" 
								mode="aspectFill" 
								style="width: 159rpx;height: 159rpx;border-radius: 10rpx;"
								@tap.stop="previewImg(detailInfo.voucher)" 
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
const {proxy} = getCurrentInstance()
const pid = ref('')
const detailInfo = ref({})
const statusList = ref([
	{label: '提现审核中', value:1,  image:'/static/images/icon_in.png'},
	{label: '提现成功', value:2, image:'/static/images/icon_success.png'},
	{label: '提现失败', value:3, image:'/static/images/icon_fail.png'},
])
onLoad((options)=>{
	pid.value = options.id
	getList()  //获取详情
})
// 获取详情
function getList(){
	let query = {
		id: pid.value
	}
	proxy.api.withdrawalRecordDetail(query).then(res=>{
		detailInfo.value = res.data.data
	})
}
function previewImg(urls, index=0){
	uni.previewImage({
		current: index, //所预览当前图片的下标
		urls: [urls],
		indicator: 'number'
	})
}

</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.text_1 {
		@include str(35rpx, bold, #fff);
		line-height: 49rpx;
	}
	.text_2 {
		@include str(45rpx, bold, #333);
		line-height: 63rpx;
	}
	.text_3 {
		@include str(28rpx, 500, #999);
		line-height: 40rpx;
		flex-shrink: 0;
	}
	.text_4 {
		@include str(28rpx, 500, #333);
		line-height: 40rpx;
	}
	.bgImg {
		width: 100vw;
		height: 320rpx;
		position: relative;
	}

	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;

		.content {
			width: calc(100vw - 40rpx);
			margin-left: 20rpx;
			position: relative;
			margin-top: -255rpx;
			// border: 1rpx solid red;
			.top{
				// position: relative;
				// left:-30rpx;
			}
			.center{
				width: 675rpx;
				height: 32rpx;
				border-radius: 16rpx;
				margin-top: 54rpx;
				background: #003F92;
			}
			.bottom{
				width: 635rpx;
				height: 769rpx;
				background-color: #fff;
				margin-top: -16rpx;
				border-radius: 0 0 10rpx 10rpx;
				.price{
					border-bottom: 1rpx solid #eee;
					padding: 33rpx 0 31rpx 0;
				}
				.info{
					padding: 30rpx;
					&_item{
						
					}
				}
			}
		}
	}
</style>